<!-- eslint-disable vue/valid-v-slot -->
<!-- eslint-disable vue/no-lone-template -->
<template>
  <div class="main-container">
    <a-tabs type="line" v-model="key" auto-switch @change="tabClick">
      <a-tab-pane title="管理回收日志" key="1">
        <TableBody>
          <template #header>
            <TableHeader ref="tableHeaderRef" :show-filter="false">
              <template #search-content>
                <a-form ref="seachForm" :model="form">
                  <a-row :gutter="24">
                    <a-col :span="4">
                      <a-form-item field="card" hide-label>
                        <a-input
                          class="width100"
                          v-model="form.card"
                          placeholder="请输入卡号"
                          allow-clear
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="adminId" hide-label>
                        <a-select
                          class="width100"
                          v-model="form.adminId"
                          placeholder="请选择公司账号"
                          allow-clear
                          allow-search
                        >
                          <a-option v-for="item in admin" :key="item.id" :value="item.id">{{
                            item.userName
                          }}</a-option>
                        </a-select>
                      </a-form-item>
                    </a-col>

                    <a-col :span="4">
                      <a-form-item field="addTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="form.addTime"
                          show-time
                          :disabledDate="changeTraceEnd"
                          placeholder="请选择开始回收时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          format="YYYY-MM-DD HH:mm:ss"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="endTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="form.endTime"
                          show-time
                          :disabledDate="changeTraceStart"
                          placeholder="请选择结束回收时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (form.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item hide-label>
                        <a-input-group class="width100">
                          <a-input v-model="form.addTotal" placeholder="开始回收数量" />
                          <a-input v-model="form.endTotal" placeholder="结束回收数量" />
                        </a-input-group>
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item hide-label>
                        <a-input-group class="width100">
                          <a-input v-model="form.addSuccess" placeholder="开始成功数量" />
                          <a-input v-model="form.endSuccess" placeholder="结束成功数量" />
                        </a-input-group>
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item hide-label>
                        <a-input-group class="width100">
                          <a-input v-model="form.addError" placeholder="开始失败数量" />
                          <a-input v-model="form.endError" placeholder="结束失败数量" />
                        </a-input-group>
                      </a-form-item>
                    </a-col>
                    <a-col :span="4" :offset="20">
                      <a-form-item content-class=" flex justify-end" field="btns" hide-label>
                        <a-space :size="15">
                          <a-button
                            type="primary"
                            v-permission="recoveryAdminList"
                            html-type="submit"
                            @click="doRefresh(1)"
                            ><template #icon> <icon-search /> </template>搜索</a-button
                          >
                          <a-button v-permission="recoveryAdminList" @click="resetSeach"
                            ><template #icon>
                              <icon-sync theme="outline" size="14" />
                            </template>
                            <!-- Use the default slot to avoid extra spaces -->
                            <template #default>重置</template></a-button
                          >
                        </a-space>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </template>
            </TableHeader>
          </template>
          <template #table-config>
            <a-space :size="15">
              <a-button
                type="outline"
                v-permission="exportRecoveryAdminList"
                @click="exportExcelLists"
                :loading="loading"
              >
                <!-- Use the default slot to avoid extra spaces -->
                <template #default>导出</template>
              </a-button>
            </a-space>
            <a-space :size="15">
              <TableConfig
                @update-border="onUpdateBorder"
                @update-striped="onUpdateStriped"
                @refresh="doRefresh"
              />
            </a-space>
          </template>
          <template #default>
            <cardTable
              :tablist="cardList"
              :load="tables.tableLoading"
              :bordered="tables.bordered"
              :striped="tables.striped"
              :url="recordRecoveryAdminList"
              :export-url="exportRecordRecoveryAdminList"
              :export-name="'卡板回收管理详情列表'"
              @list="onlist"
              :nameski="1"
            />
          </template>
          <template #footer>
            <TableFooter ref="tableFooterRef" :pagination="pagination" />
          </template>
        </TableBody>
      </a-tab-pane>
      <a-tab-pane title="客户回收日志" key="2">
        <TableBody>
          <template #header>
            <TableHeader ref="tableHeaderRef" :show-filter="false">
              <template #search-content>
                <a-form ref="seachFormUser" :model="formUser">
                  <a-row :gutter="24">
                    <a-col :span="4">
                      <a-form-item field="card" hide-label>
                        <a-input
                          class="width100"
                          v-model="formUser.card"
                          placeholder="请输入卡号"
                          allow-clear
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="userId" hide-label>
                        <a-select
                          class="width100"
                          v-model="formUser.userId"
                          placeholder="请选择客户账号"
                          allow-clear
                          allow-search
                          :options="user"
                          :virtual-list-props="{ height: 200 }"
                        />
                      </a-form-item>
                    </a-col>

                    <a-col :span="4">
                      <a-form-item field="addTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="formUser.addTime"
                          show-time
                          :disabledDate="changeTraceEnd"
                          placeholder="请选择开始回收时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          format="YYYY-MM-DD HH:mm:ss"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (formUser.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (formUser.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (formUser.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (formUser.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (formUser.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (formUser.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (formUser.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (formUser.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (formUser.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (formUser.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item field="endTime" hide-label>
                        <a-date-picker
                          class="width100"
                          v-model="formUser.endTime"
                          show-time
                          :disabledDate="changeTraceStart"
                          placeholder="请选择结束回收时间"
                          :time-picker-props="{ defaultValue: '12:00:00' }"
                          :shortcuts="[
                            {
                              label: '今日',
                              value: () => (
                                (formUser.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (formUser.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                ))
                              ),
                            },
                            {
                              label: '昨日',
                              value: () => (
                                (formUser.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (formUser.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '七日',
                              value: () => (
                                (formUser.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                                  .subtract(7, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (formUser.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                                  .subtract(1, 'day')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '本月',
                              value: () => (
                                (formUser.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                                  'YYYY-MM-DD HH:mm:ss'
                                )),
                                (formUser.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                            {
                              label: '上月',
                              value: () => (
                                (formUser.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                                  .subtract(1, 'month')
                                  .format('YYYY-MM-DD HH:mm:ss')),
                                (formUser.endTime = $dayjs()
                                  .subtract(1, 'month')
                                  .endOf('month')
                                  .format('YYYY-MM-DD HH:mm:ss'))
                              ),
                            },
                          ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item hide-label>
                        <a-input-group class="width100">
                          <a-input v-model="formUser.addTotal" placeholder="开始回收数量" />
                          <a-input v-model="formUser.endTotal" placeholder="结束回收数量" />
                        </a-input-group>
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item hide-label>
                        <a-input-group class="width100">
                          <a-input v-model="formUser.addSuccess" placeholder="开始成功数量" />
                          <a-input v-model="formUser.endSuccess" placeholder="结束成功数量" />
                        </a-input-group>
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item hide-label>
                        <a-input-group class="width100">
                          <a-input v-model="formUser.addError" placeholder="开始失败数量" />
                          <a-input v-model="formUser.endError" placeholder="结束失败数量" />
                        </a-input-group>
                      </a-form-item>
                    </a-col>
                    <a-col :span="4" :offset="20">
                      <a-form-item content-class=" flex justify-end" field="btns" hide-label>
                        <a-space :size="15">
                          <a-button
                            v-permission="recoveryUserList"
                            type="primary"
                            html-type="submit"
                            @click="doRefreshUser(1)"
                            ><template #icon> <icon-search /> </template>搜索</a-button
                          >
                          <a-button v-permission="recoveryUserList" @click="resetSeachUser"
                            ><template #icon>
                              <icon-sync theme="outline" size="14" />
                            </template>
                            <!-- Use the default slot to avoid extra spaces -->
                            <template #default>重置</template></a-button
                          >
                        </a-space>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </template>
            </TableHeader>
          </template>
          <template #table-config>
            <a-space :size="15">
              <a-button
                type="outline"
                v-permission="exportRecoveryUserList"
                @click="exportExcelListsUser"
                :loading="loading"
              >
                <!-- Use the default slot to avoid extra spaces -->
                <template #default>导出</template>
              </a-button>
            </a-space>
            <a-space :size="15">
              <TableConfig
                @update-border="onUpdateBorder"
                @update-striped="onUpdateStriped"
                @refresh="doRefreshUser"
              />
            </a-space>
          </template>
          <template #default>
            <cardTable
              :tablist="cardListUser"
              :load="tables.tableLoading"
              :bordered="tables.bordered"
              :striped="tables.striped"
              :url="recordRecoveryUserList"
              :export-url="exportRecordRecoveryUserList"
              :export-name="'卡板回收客户详情列表'"
              @list="onlistUser"
              :nameski="1"
            />
          </template>
          <template #footer>
            <TableFooter ref="tableFooterRef" :pagination="paginations" />
          </template>
        </TableBody>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
  import {
    recoveryAdminList,
    exportRecoveryAdminList,
    recordRecoveryAdminList,
    exportRecordRecoveryAdminList,
    recoveryUserList,
    exportRecoveryUserList,
    recordRecoveryUserList,
    exportRecordRecoveryUserList,
  } from '@/api/url'
  import { get } from '@/api/http'
  import { usePagination } from '@/hooks/table'
  import { onMounted, reactive, ref } from 'vue'

  import useCommonStore from '@/store/modules/common'
  import _ from 'lodash-es'

  import cardTable from '@/views/log/compoents/cardTable.vue'

  const userCommon = useCommonStore()

  const pagination = usePagination(doRefresh)
  const paginations = usePagination(doRefreshUser)

  const seachForm = ref()
  const seachFormUser = ref()

  const loading = ref(false)

  const admin: any = ref([])
  const cardList: any = ref([])
  const user: any = ref([])
  const cardListUser: any = ref([])
  const key: any = ref('1')

  const form = ref({
    adminId: '', //管理员id
    channelId: '', //渠道id
    seriesId: '', //系列id
    addTotal: '', // 入库开始数量
    endTotal: '', // 入库结束数量
    addSuccess: '',
    endSuccess: '',
    addError: '',
    endError: '',
    addTime: '',
    endTime: '',
    userId: '',
    card: '',
  })

  const formUser = ref({
    adminId: '', //管理员id
    channelId: '', //渠道id
    seriesId: '', //系列id
    addTotal: '', // 入库开始数量
    endTotal: '', // 入库结束数量
    addSuccess: '',
    endSuccess: '',
    addError: '',
    endError: '',
    addTime: '',
    endTime: '',
    userId: '',
    card: '',
  })

  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
  })

  const tableColumns: any = reactive({
    list: [],
    listUser: [],
  })

  const tabClick = (val: string | number) => {
    if (val == '2') {
      userLists()
      resetSeachUser()
    } else {
      resetSeach()
    }
  }

  //获取客户列表
  const userLists = () => {
    userCommon.userLists().then((res) => {
      user.value = res.data
    })
  }

  const resetSeach = () => {
    form.value = {
      adminId: '', //管理员id
      channelId: '', //渠道id
      seriesId: '', //系列id
      addTotal: '', // 入库开始数量
      endTotal: '', // 入库结束数量
      addSuccess: '',
      endSuccess: '',
      addError: '',
      endError: '',
      addTime: '',
      endTime: '',
      userId: '',
      card: '',
    }

    doRefresh(1)
  }

  const resetSeachUser = () => {
    formUser.value = {
      adminId: '', //管理员id
      channelId: '', //渠道id
      seriesId: '', //系列id
      addTotal: '', // 入库开始数量
      endTotal: '', // 入库结束数量
      addSuccess: '',
      endSuccess: '',
      addError: '',
      endError: '',
      addTime: '',
      endTime: '',
      userId: '',
      card: '',
    }

    doRefreshUser(1)
  }

  const onlistUser = (val: any) => {
    tableColumns.listUser = val
  }

  const onlist = (val: any) => {
    tableColumns.list = val
  }

  const exportExcelLists = () => {
    loading.value = true
    userCommon
      .downLoads(exportRecoveryAdminList, form, '卡板回收管理日志列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  const exportExcelListsUser = () => {
    loading.value = true
    userCommon
      .downLoads(exportRecoveryUserList, form, '卡板回收客户日志列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  function onUpdateBorder(isBordered: boolean) {
    tables.bordered = isBordered
  }

  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }

  function doRefresh(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    get({
      url: recoveryAdminList,
      data: {
        ...form.value,
        page: pagination.page,
        size: pagination.pageSize,
      },
    }).then((res) => {
      tables.tableLoading = false
      cardList.value = res.data.list
      pagination.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }

  function doRefreshUser(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    get({
      url: recoveryUserList,
      data: {
        ...formUser.value,
        page: pagination.page,
        size: pagination.pageSize,
      },
    }).then((res) => {
      tables.tableLoading = false
      cardListUser.value = res.data.list
      paginations.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }

  const adminLists = () => {
    userCommon.adminLists().then((res) => {
      admin.value = res.data
    })
  }

  //跟踪API开始时间限制结束时间
  function changeTraceEnd(time: any) {
    return time.getTime() > new Date(form.value.endTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStart(time: any) {
    return time.getTime() < new Date(form.value.addTime).getTime() //小于开始时间的不选
  }

  onMounted(async () => {
    await doRefresh()
    await adminLists()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }

  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }

  :deep(.arco-tabs-nav-tab) {
    background-color: var(--color-bg-1);
    padding: 20px 0;
    border-radius: 10px;
  }

  :deep(.arco-tabs-content::before) {
    height: 0px !important;
  }

  :deep(.arco-tabs-tab) {
    margin: 0 20px;
    padding: 0;
    padding-bottom: 5px;
  }

  :deep(.arco-tabs-nav::before) {
    position: static !important;
    height: 0px !important;
  }

  :deep(.arco-tabs-content) {
    padding-top: 20px;
  }

  .box {
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //用省略号显示
    white-space: nowrap;
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 40px;
    margin-bottom: 20px;

    .button {
      box-sizing: border-box;
      padding-bottom: 5px;
    }
  }

  .action {
    color: #009dff;
    border-bottom: 3px solid #009dff;
  }

  .butten {
    padding: 0px 4px;
  }
</style>
